@import "@@/styles/variables.scss";

// 重写 app-container 样式
.app-container {
  display: flex;
  flex-direction: column;
  margin: 20px;
  padding: 20px;
  background-color: var(--el-bg-color);
  border-radius: 8px;
}

.page-content {
  display: flex;
  flex-direction: column;

  // 确保头部组件不被压缩
  :deep(.page-header) {
    flex-shrink: 0;
    margin-bottom: 24px;
  }
}

// 搜索区域
.search-section {
  margin-bottom: 24px;

  .search-box {
    width: 100%;

    :deep(.el-input) {
      .el-input__wrapper {
        border-radius: 6px;
        border: 1px solid var(--el-border-color-lighter);
        height: 40px;

        &:hover {
          border-color: var(--el-border-color);
        }

        &.is-focus {
          border-color: var(--el-color-primary);
          box-shadow: 0 0 0 2px var(--el-color-primary-light-9);
        }
      }

      .el-input__inner {
        font-size: 14px;
        height: 38px;
        line-height: 38px;
      }

      .el-input__prefix {
        color: var(--el-text-color-placeholder);
      }
    }
  }
}

// 店铺类型网格布局
.store-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;

  // 空状态
  .empty-state {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;

    :deep(.el-empty) {
      .el-empty__description {
        color: var(--el-text-color-secondary);
        font-size: 14px;
      }

      .el-button {
        margin-top: 16px;
        background-color: var(--el-color-primary);
        border-color: var(--el-color-primary);

        &:hover {
          background-color: var(--el-color-primary-dark-2);
          border-color: var(--el-color-primary-dark-2);
        }
      }
    }
  }
}

// 响应式适配
@media (max-width: 1200px) {
  .store-types-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .app-container {
    margin: 10px !important;
    padding: 15px !important;
  }

  .search-section {
    margin-bottom: 20px;
  }

  .store-types-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

// 加载状态样式
:deep(.el-loading-mask) {
  background-color: var(--el-overlay-color);
  backdrop-filter: blur(2px);

  .el-loading-spinner {
    .circular {
      stroke: var(--el-text-color-regular);
    }

    .el-loading-text {
      color: var(--el-text-color-secondary);
      font-size: 14px;
    }
  }
}

// 消息框样式优化
:deep(.el-message-box) {
  border-radius: 12px;

  .el-message-box__header {
    .el-message-box__title {
      font-weight: 600;
      color: var(--el-text-color-primary);
    }
  }

  .el-message-box__content {
    .el-message-box__message {
      color: var(--el-text-color-regular);
      line-height: 1.5;
    }
  }

  .el-message-box__btns {
    .el-button {
      border-radius: 6px;
      font-weight: 500;

      &.el-button--danger {
        background-color: var(--el-color-danger);
        border-color: var(--el-color-danger);

        &:hover {
          background-color: var(--el-color-danger-dark-2);
          border-color: var(--el-color-danger-dark-2);
        }
      }
    }
  }
}
